<template>
  <div class="tree" v-for="(item, index) in data" :key="index" @click.stop="clickTap(item, $event)">
    <input v-model="item.checked" type="checkbox">
    <span>{{ item.name }}</span>
    <!-- 第一种方式 -->
    <!-- <Tree v-if="item?.children?.length" :data="item?.children"></Tree> -->
    <!-- 第二种方式 更改组件名称 -->
    <!-- 可选链 双问号表达式 -->
    <lipin v-if="item?.children?.length" :data="item?.children"></lipin>
    <!-- 第三种方式 更改组件名称 -->
    <!-- <xiaoPinpin v-if="item?.children?.length" :data="item?.children"></xiaoPinpin> -->
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue"

interface Tree {
  name: string,
  checked: boolean,
  children?: Tree[],
}

defineProps<{
  data?: Tree[]
}>()

</script>

<script lang="ts">
// 第二种方式
// 用来更改组件名称
export default {
  name: "lipin"
}

// 第三种方式
// unplugin-vue-define-options插件为每个全局组件添加上名字
// import DefineOptions from 'unplugin-vue-define-options/vite'
/* defineOptions({
  name: "xiaoPinpin"
}) */

const clickTap = (item:Tree, e) => {
  console.log(item, e)
}

</script>

<style scoped lang="less">
.tree {
  text-align: left;
  margin-left: 10px;
  input {
    display: inline-block;
    margin-right: 8px;
  }
}
</style>